<script>

export default {
  data() {
    return {
      goodsManageData: {
        pageNum: 1,
        pageSize: 5,
        goodsName: '',
        goodsStatus: '',
        shopName: '',
        startTime: '',
        endTime: ''
      },
      date: '',
      goodsDataList:[],
      total:1,
    }
  },
  methods: {
    //修改上下架状态
    changeStatue(bb){
      let statueData = {
        goodsId:bb.goodsId,
        goodsStatus:bb.goodsStatus
      }
      statueData.goodsStatus= bb.goodsStatus===0 ? 1:0
      this.$http.post('goods/modifyShopGoods',statueData)
          .then(res=>{
            if(res.data.status==200){
              this.getProduceMessage()
              this.$message.success('操作成功')
            }
          })
    },
    //分页
    handleSizeChange(val){
      this.goodsManageData.pageSize=val;
      this.getProduceMessage()
    },
    handleCurrentChange(val){
      this.goodsManageData.pageNum=val;
      this.getProduceMessage()
    },
    //获取值
    getProduceMessage() {
      this.$http.get('goods/querySearchShopGoodsList',{params:this.goodsManageData})
          .then(res=>{
            if(res.data.status==200){
              this.goodsDataList=res.data.data.list;
              this.total=res.data.data.total;
              // this.$message.success('获取数据成功')
            }else {
              this.$message.error('数据异常！')
            }
          })
          .catch(error=>{
            this.$message.error('数据接口异常！')
          })
    }
  },
  mounted() {
    this.getProduceMessage()
  },
  watch:{
    date(){
      // console.log(this.date)
      this.goodsManageData.startTime=this.date[0];
      this.goodsManageData.endTime=this.date[1]
    }
  }
}

</script>

<template>
  <div>
    <!--  面包屑 表头  -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>帮买取快递废品回收</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!--  搜索框  -->
    <el-row>
      <!--    inline行列样式，行列平铺    -->
      <el-form :inline="true" :model="goodsManageData" class="demo-form-inline" style="margin-top: 15px">
        <el-form-item label="状态：">
          <el-radio-group size="normal">
            <el-radio-button label="all">全部商品</el-radio-button>
            <el-radio-button label="on">上架中</el-radio-button>
            <el-radio-button label="down">已下架</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="商品名称：">
          <el-input v-model="goodsManageData.goodsName" clearable @clear="getProduceMessage"
                    placeholder="请输入小区名称"></el-input>
        </el-form-item>
        <el-form-item label="所属门店：">
          <el-input v-model="goodsManageData.shopName" clearable @clear="getProduceMessage"
                    placeholder="请输入小区名称"></el-input>
        </el-form-item>
        <el-form-item label="添加时间：">
          <el-date-picker
              v-model="date"
              end-placeholder="结束日期"
              range-separator="至"
              start-placeholder="开始日期"
              type="daterange"
              value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" plain @click="getProduceMessage">查 询</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <!--    表格-->
    <el-table border :data="goodsDataList" style="width: 100%; margin-top: 10px; margin-bottom: 10px">
      <el-table-column label="商品ID" prop="goodsId" align="center"></el-table-column>
      <el-table-column label="商品" prop="goodsName" align="center"></el-table-column>
      <el-table-column label="所属门店" prop="goodsShopName" align="center"></el-table-column>
      <el-table-column label="销量" prop="goodsSalesVolume" align="center"></el-table-column>
      <el-table-column label="预估价" prop="goodsPresentPrice" align="center"></el-table-column>
      <el-table-column label="发布时间" prop="addTime" width="180px" align="center"></el-table-column>
      <el-table-column label="状态" prop="goodsStatus" width="180px" align="center">
        <template slot-scope="scope">
          <el-button type="success" size="mini" v-show="scope.row.goodsStatus==1" plain>上架中</el-button>
          <el-button type="danger" size="mini" v-show="scope.row.goodsStatus==0" plain>已下架</el-button>
          {{scope.row.goodsStatus}}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center">
        <template slot-scope="scope">
          <el-link type="warning" v-show="scope.row.goodsStatus==0" :underline="false" @click="changeStatue(scope.row)">上架</el-link>&nbsp;
          <el-link type="warning" v-show="scope.row.goodsStatus==1" :underline="false" @click="changeStatue(scope.row)">下架</el-link>&nbsp;
          {{scope.row.goodsStatus}}
        </template>
      </el-table-column>
    </el-table>
    <!--  分页  -->
    <el-row>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="goodsManageData.pageNum"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="goodsManageData.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </el-row>

  </div>
</template>

<style scoped>

</style>